
<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <Button class="features-btn btn-auto-m" @click="$router.go(-1)" style="margin-left:0px;">
                            <Icon type="ios-arrow-back" size="17" />返回
                        </Button>
                        <Button @click="exportExcel" style="margin-left:10px;width:92px;height:30px;text-align:center;" :loading="exportLoading">导出Execl</Button>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div></div>
                        <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入商品名称" style="width:200px" />
                        <i-input style="display:none"></i-input>
                        <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                    </div>
                </div>
            </Form>
        </global-tables>
    </div>
</template>

<script>
/**
 *  采购单明细列表
 */
import { DataDetails, ExeclData } from './service';
import GlobalTables from '@/components/GlobalTables';
import excel from '@/components/Excel';
export default {
    name: 'financeInboundproDetail',
    components: {
        GlobalTables
    },
    data() {
        return {
            list: [],
            data4: [],
            total: 0,
            itemId: 0,
            exportLoading: false,
            productsList: [],
            loading: true,
            type: '',
            defaultAutoComplete: '',
            PSIDlist: [],
            autoComplete: [],
            isModal: false,
            allSelectArr: null,
            isSpecifications: false,
            Specifications: '',
            ModalTitle: '新建采购单明细',
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '商品名称',
                    key: 'ProName'
                    // render: (h, params) => {
                    //     const { PSID, PName,ProName } = params.row;
                    //     if (PSID == 0) {
                    //         return h('div', [h('p', {}), PName]);
                    //     } else {
                    //         return h('div', [h('p', {}), `${PName}`]);
                    //     }
                    // }
                },
                {
                    title: '厂家名称',
                    key: 'FactoryShortName'
                },
                {
                    title: '规格名称',
                    width: 150,
                    key: 'Spec'
                    // render: (h, params) => {
                    //     const { PSID, PSName } = params.row;
                    //     if (PSID == 0) {
                    //         return h('div', [h('p', {}), '单品']);
                    //     } else {
                    //         return h('div', [h('p', {}), PSName]);
                    //     }
                    // }
                },
                {
                    title: '售价',
                    key: 'PriceNew',
                    width: 100
                },
                {
                    title: '拆分价',
                    key: 'PriceUnit',
                    width: 100
                },
                {
                    title: '入库数量',
                    key: 'PCount',
                    width: 100
                },
                {
                    title: '单位',
                    width: 150,
                    render: (h, params) => {
                        const { UnitCount, UnitSales, UnitBuy } = params.row;
                        if (UnitBuy != UnitSales) {
                            return h('div', [h('p', {}), `${UnitBuy}(${UnitCount}${UnitSales})`]);
                        } else {
                            return h('div', [h('p', {}), `${UnitBuy}`]);
                        }
                    }
                },
                {
                    title: '货位',
                    key: 'Location',
                    width: 100
                }
            ]
        };
    },
    methods: {
        //表格导出
        exportExcel() {
            ExeclData({
                oid: this.$route.params.id
            }).then(res => {
                this.tableData = res.data.Details;
                if (this.tableData.length) {
                    // for (let i = 0; i < this.tableData.length; i++) {
                    //     this.tableData[i].ss = (
                    //         this.tableData[i].PCost * this.tableData[i].PCount
                    //     ).toFixed(2)
                    //     this.tableData[i].sss = (
                    //         this.tableData[i].PriceNew *
                    //         this.tableData[i].PCount
                    //     ).toFixed(2)
                    //     this.tableData[i].ssss = (
                    //         this.tableData[i].PriceNew *
                    //             this.tableData[i].PCount -
                    //         this.tableData[i].PCost * this.tableData[i].PCount
                    //     ).toFixed(2)
                    // }
                    this.exportLoading = true;
                    const params = {
                        title: [
                            '货位',
                            '名称',
                            '规格',
                            '单位',
                            '厂家',
                            '有效期',
                            '数量',
                            '进价',
                            '进额',
                            '零价',
                            '零额',
                            '差额',
                            '批准文号'
                        ],
                        key: [
                            'Location',
                            'ProName',
                            'Spec',
                            'UnitBuy',
                            'FactoryShortName',
                            'ExpireDate',
                            'Count',
                            'Cost',
                            'CostTotal',
                            'Price',
                            'PriceTotal',
                            'Diff',
                            'StdDocID'
                        ],
                        data: this.tableData,
                        autoWidth: true,
                        filename: res.data.Title
                    };
                    excel.export_array_to_excel(params);
                    this.exportLoading = false;
                } else {
                    this.$message.error('表格数据不能为空！');
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            data.ID = this.$route.params.id;
            DataDetails(data).then(res => {
                this.list = res.data;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 对话框 */
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        }
    },
    mounted() {
        /* 列表请求 */
        // const { id, type } = this.$route.params;
        // this.type = type;
        // if (this.type != 1) {
        //     this.columns.pop();
        // }
        // this.search.keyword = id;
        this.getTablesListData();
    }
};
</script>

<style lang="less" scoped>
.demo-auto-complete-wrap {
    top: 100px;
    height: 300px;
    overflow-y: scroll;
}
.demo-auto-complete-item {
    padding: 4px 0;
}
.demo-auto-complete-group {
    font-size: 12px;
    padding: 4px 6px;
}
.demo-auto-complete-group span {
    color: #666;
    font-weight: bold;
}
.demo-auto-complete-group a {
    float: right;
}
.demo-auto-complete-count {
    float: right;
    color: #999;
}
.demo-auto-complete-more {
    display: block;
    margin: 0 auto;
    padding: 4px;
    text-align: center;
    font-size: 12px;
}
</style>

